import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Container } from '@/components/common/container';
import { Toolbar, ToolbarActions, ToolbarHeading } from '@/layouts/demo1/components/toolbar';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Plus, Filter, Clock, CheckCircle, XCircle, AlertCircle, FileText } from 'lucide-react';
import ApprovalTaskList from '@/components/project/approval-task-list';
import ApprovalFlow from '@/components/project/approval-flow';

const ApprovalManagementPage = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('pending');
  const [selectedTask, setSelectedTask] = useState(null);

  // 模拟审批流程数据
  const mockApprovalSteps = [
    {
      approver_name: '李四',
      role_name: '部门经理',
      status: 'approved',
      approved_at: '2024-01-16 14:30:00',
      comment: '项目方案合理，预算控制得当，同意立项。'
    },
    {
      approver_name: '赵六',
      role_name: '技术总监',
      status: 'pending',
      approved_at: null,
      comment: null
    },
    {
      approver_name: '孙八',
      role_name: '财务总监',
      status: 'pending',
      approved_at: null,
      comment: null
    }
  ];

  // 处理查看审批详情
  const handleViewTask = (task) => {
    setSelectedTask(task);
  };

  // 处理审批通过
  const handleApprove = (task) => {
    console.log('审批通过:', task);
    // TODO: 调用审批API
  };

  // 处理审批拒绝
  const handleReject = (task) => {
    console.log('审批拒绝:', task);
    // TODO: 调用审批API
  };

  // 处理审批退回
  const handleReturn = (task) => {
    console.log('审批退回:', task);
    // TODO: 调用审批API
  };

  // 处理创建新申请
  const handleCreateApplication = () => {
    navigate('/project-management/project-form');
  };

  return (
    <>
      <Container>
        <Toolbar>
          <ToolbarHeading
            title="审批管理"
            description="管理项目相关的审批流程"
          />
          <ToolbarActions>
            <Button onClick={handleCreateApplication}>
              <Plus className="size-4 me-2" />
              新建申请
            </Button>
          </ToolbarActions>
        </Toolbar>
      </Container>

      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 左侧：审批任务列表 */}
          <div className="lg:col-span-2">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <FileText className="size-5" />
                  审批任务
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Tabs value={activeTab} onValueChange={setActiveTab}>
                  <TabsList className="grid w-full grid-cols-4">
                    <TabsTrigger value="pending" className="flex items-center gap-1">
                      <Clock className="size-4" />
                      待审批
                      <Badge variant="default" className="ml-1">6</Badge>
                    </TabsTrigger>
                    <TabsTrigger value="approved" className="flex items-center gap-1">
                      <CheckCircle className="size-4" />
                      已通过
                      <Badge variant="success" className="ml-1">3</Badge>
                    </TabsTrigger>
                    <TabsTrigger value="rejected" className="flex items-center gap-1">
                      <XCircle className="size-4" />
                      已拒绝
                      <Badge variant="destructive" className="ml-1">2</Badge>
                    </TabsTrigger>
                    <TabsTrigger value="returned" className="flex items-center gap-1">
                      <AlertCircle className="size-4" />
                      已退回
                      <Badge variant="secondary" className="ml-1">1</Badge>
                    </TabsTrigger>
                  </TabsList>

                  <TabsContent value="pending" className="mt-4">
                    <ApprovalTaskList
                      onView={handleViewTask}
                      onApprove={handleApprove}
                      onReject={handleReject}
                      onReturn={handleReturn}
                      userRole="approver"
                      defaultStatusFilter="pending"
                    />
                  </TabsContent>

                  <TabsContent value="approved" className="mt-4">
                    <ApprovalTaskList
                      onView={handleViewTask}
                      userRole="user"
                      defaultStatusFilter="approved"
                    />
                  </TabsContent>

                  <TabsContent value="rejected" className="mt-4">
                    <ApprovalTaskList
                      onView={handleViewTask}
                      userRole="user"
                      defaultStatusFilter="rejected"
                    />
                  </TabsContent>

                  <TabsContent value="returned" className="mt-4">
                    <ApprovalTaskList
                      onView={handleViewTask}
                      userRole="user"
                      defaultStatusFilter="returned"
                    />
                  </TabsContent>
                </Tabs>
              </CardContent>
            </Card>
          </div>

          {/* 右侧：审批详情 */}
          <div className="lg:col-span-1">
            {selectedTask ? (
              <div className="space-y-6">
                {/* 申请详情 */}
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">申请详情</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">申请编号</label>
                      <p className="text-sm font-mono">{selectedTask.task_code}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">申请标题</label>
                      <p className="text-sm">{selectedTask.title}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">申请类型</label>
                      <Badge variant="outline" className="text-xs">
                        {selectedTask.type_name}
                      </Badge>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">申请人</label>
                      <p className="text-sm">{selectedTask.applicant_name}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">申请部门</label>
                      <p className="text-sm">{selectedTask.applicant_department}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">预算金额</label>
                      <p className="text-sm font-semibold text-primary">
                        ¥{selectedTask.budget?.toLocaleString()}
                      </p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">申请描述</label>
                      <p className="text-sm text-muted-foreground">{selectedTask.description}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">提交时间</label>
                      <p className="text-sm">{selectedTask.submit_time}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-muted-foreground">截止时间</label>
                      <p className="text-sm">{selectedTask.deadline}</p>
                    </div>
                  </CardContent>
                </Card>

                {/* 审批流程 */}
                <ApprovalFlow
                  approvalSteps={mockApprovalSteps}
                  currentStep={selectedTask.progress - 1}
                  canApprove={selectedTask.status === 'pending'}
                  canReject={selectedTask.status === 'pending'}
                  canReturn={selectedTask.status === 'pending'}
                  onApprove={() => handleApprove(selectedTask)}
                  onReject={() => handleReject(selectedTask)}
                  onReturn={() => handleReturn(selectedTask)}
                />
              </div>
            ) : (
              <Card>
                <CardHeader>
                  <CardTitle>审批详情</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="text-center py-8 text-muted-foreground">
                    <FileText className="size-12 mx-auto mb-4 text-muted-foreground/50" />
                    <p>请选择一个审批任务查看详情</p>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </Container>
    </>
  );
};

export default ApprovalManagementPage; 